<template>
  <div class="container">
    <a-form-model :model="form" ref="form" v-bind="layout" :rules="rules" >
      <a-form-model-item label="团员" prop="memberId">
        <a-select v-model="form.memberId"  placeholder="团员" @change="memberChange" >
           <a-select-option
          v-for="item in dataList"
          :value="item.id"
          :key="item.id"
          >{{ item.name }}</a-select-option
        >
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="职位" prop="type">
        <a-select v-model="form.type"  placeholder="职位" >
          <a-select-option :value="1">
            书记 
          </a-select-option>
          <a-select-option :value="2">
            副书记
          </a-select-option>
          <a-select-option :value="3">
            组织委员
          </a-select-option>
          <a-select-option :value="4">
            宣传委员
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="组织机构" prop="orgId">
        <a-input disabled placeholder="组织机构" size="large" v-model="form.orgName">
          <div slot="addonAfter" @click="onSearch">
            选择
          </div>
        </a-input>
      </a-form-model-item>

      <a-form-model-item label="候选人名单" prop="names">
        <a-input v-model="form.names" placeholder="候选人名单" />
      </a-form-model-item>
      <a-form-model-item label="得票数" prop="note">
        <a-input type="number" minLength="0" min="1" v-model="form.note" placeholder="得票数" />
      </a-form-model-item>
      <a-form-model-item label="选举结果" prop="state">
        <a-select v-model="form.state"  placeholder="结果" >
          <a-select-option :value="0">
            未通过
          </a-select-option>
          <a-select-option :value="1">
            通过
          </a-select-option>
        </a-select>
      </a-form-model-item>
       <!-- <a-form-model-item label="团干部" prop="sex">
        <a-select v-model="form.isAdmin"  placeholder="团干部" >
          <a-select-option :value="0">
            否
          </a-select-option>
          <a-select-option :value="1">
            是
          </a-select-option>
        </a-select>
      </a-form-model-item> -->
    
    </a-form-model>
     <a-modal
      title="组织"
      v-if="visible"
      :visible="visible"
      width="640px"
      height="672px"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
      :destroyOnClose="true"
    >
    <orgTree ref="orgtree"  @reject="rejectTree"></orgTree>
     </a-modal>
  </div>
</template>

<script>
import orgTree from "@/components/orgTree";
export default {
  components: { orgTree },
  props: {
    form: {
      type: Object,
      default: () => {
        return {}
      },
    }
  },
  data() {
    let validateNote = (rule, value, callback) => {
      if ((!value && value !== 0) || value < 0) {
        callback(new Error('请输入正确的得票数'));
      } else {
        callback();
      }
    };
    return {
      dataList:[],
      myList: [],
      visible:false,
      confirmLoading:false,
      layout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 18 },
      },
      rules: {
        memberId: [{required: true, message: '请输入团员', trigger: 'change'}],
        type: [{required: true, message: '请输入职位', trigger: 'change'}],
        orgId: [{required: true, message: '请输入组织机构', trigger: 'change'}],
        names: [{required: true, message: '请输入候选人名单', trigger: 'blur'}],
        note: [{required: true, message: '请输入得票数', trigger: 'blur'},{validator: validateNote, trigger: 'blur'}],
        state: [{required: true, message: '请输入选举结果', trigger: 'change'}],
      },
    }
  },
  mounted() {
    this.searchList()
    // if (this.$route.query.id) {
    //   this.form = this.$route.query 
    // }
  },
  methods: {
    memberChange(item){
      let member = this.dataList.find(ele => ele.id == item)
      if (member) {
        this.form.orgName = member.orgName
        this.form.orgId = member.orgId
      }
    },
     searchList() {
      this.$ajax({
        url: this.$api.member.findList,
        data: {status: "2"},
        success: (result) => {
          this.dataList = result;
        },
      });
    },
     reject() {
      this.confirmLoading = false;
    },
    pass() {
      this.visible = false;
      this.confirmLoading = false;
      this.search();
    },
    handleOk(e) {
      this.$refs.orgtree.save();
    },
    handleCancel(e) {
      this.visible = false;
    },
    onSearch(){
   this.visible = true
    },
    save() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$ajax({
            url: this.$api.election.saveOrUpdate,
            data: this.form,
            success: (result) => {
              this.$message.success("操作成功");
              this.$emit('pass', null);
              // this.$router.push(`/member/list`);
            },
            fail: (err) => {
              this.$message.success(err);
              this.$emit('reject', null);
            }
          });
        } else {
          this.$emit('reject', null);
        }
      });
    },
    rejectTree(data){
     this.visible = false;
     this.form.orgName = data.name
     this.form.orgId = data.id
    },
    cancel() {
      this.$router.push(`/member/list`);
    },
  }
}
</script>

<style lang="less" scoped>
.container{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
    padding: 8px 108px!important;
  .header{
    height: 56px;
    flex-grow: 0;
    display: flex;
    align-items: center;
    font-size: 1.8rem;
    padding-left: 2.4rem;
  }
  .content{
    height: auto;
    padding: 3.2rem 13.2rem;
    border-top: .1rem solid rgba(0, 0, 0, 0.1);;
    border-bottom: .1rem solid rgba(0, 0, 0, 0.1);;
  }
  .footer{
    height: 64px;
    flex-grow: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 2.4rem;
    .ant-btn {
      margin-left: 1.6rem;
    }
  }
}
.ant-form-item-with-help {
    margin-bottom: 24px !important;
}
</style>
